<template>
	<view class="content">
		<u-navbar :border-bottom="false"></u-navbar>
		<view class="content_main">
			<view class="content_main_tit u-m-t-40">
				<view class="u-flex u-row-between">
					<view class="u-font-46 u-font-weight">
						想找什么工作？
					</view>
					<view>
						<text style="color: #00D075;">{{data.list.length}}</text>/3
					</view>
				</view>
				<view class="u-m-t-30 u-font-13" style="color: #6b6666;">
					添加多个求职期望，可获得更多精准高薪工作机会
				</view>
			</view>

			<view class="u-m-t-30">
				<view class="u-flex u-row-between u-border-bottom u-p-t-20 u-p-b-20" v-for="item in data.list"
					:key="item.id" @click="toDetail(item)">
					<view>
						<view class="u-font-30">
							<text>{{`[${item.district_text}]`}}</text>
							<text>{{item.category_text}}</text>
						</view>
						<view class="u-flex u-row-left u-m-t-10 u-font-13" style="color: #6b6666;">
							<text class="u-m-r-20">{{item.wage_text}}</text>
							<text class="u-m-r-20">{{item.nature == 1 ?'全职':'兼职'}}</text>
							<text>{{item.category3_text}}</text>
						</view>
					</view>
					<u-icon name="arrow-right" color="#bbbbbb" size="40"></u-icon>
				</view>
			</view>


			<view class="content_main_btn" v-if="data.list.length < 3" @click="toDetail(null)">
				<u-icon class="u-m-r-10" name="plus-circle" color="#00D075" size="48"></u-icon>
				继续添加求职期望
			</view>


			<view class="content_fotter u-border-bottom u-flex u-row-between" @click="data.isJobStatus = true">
				<view class="u-font-30">
					求职状态
				</view>
				<view class="u-flex">
					<view class="u-font-24 u-m-r-10" style="color: #6b6666;">
						{{data.jobStatus}}
					</view>
					<u-icon name="arrow-right" size="24" color="#6b6666" top="2"></u-icon>
				</view>
			</view>
		</view>
		<u-select v-model="data.isJobStatus" :list="data.jobStatusList" value-name="id" label-name="name"
			@cancel="data.isJobStatus = false" @confirm="confirm"></u-select>
	</view>
</template>

<script setup>
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		reactive
	} from "vue";
	const data = reactive({
		list: [],
		// 求职状态
		isJobStatus: false,
		jobStatusList: [],
		jobStatus: '',
		jobStatusId: ''
	})
	onShow(() => {
		getClassifyInfo()
		getIntentionList()
	})
	const confirm = async (e) => {
		data.jobStatus = e[0].label
		data.jobStatusId = e[0].value
		let params = {
			current: e[0].value
		}
		let res = await uni.$u.api.getCurrentSave(params)
		uni.$u.toast('修改成功')
	}
	// 获取求职状态列表
	const getClassifyInfo = async () => {
		let params = {
			type: 'current'
		}
		let res = await uni.$u.api.getClassifyInfo({
			params
		})
		data.jobStatusList = res
	}
	// 获取求职意向列表
	const getIntentionList = async () => {
		let res = await uni.$u.api.getIntentionList()
		data.list = res.items
		data.jobStatus = res.current_text
		data.jobStatusId = res.current
	}
	// 去求职期望详情页
	const toDetail = (item) => {
		uni.$u.route('/pages/pagesHome/jobIntention/detail', {
			type: item ? 'edit' : 'add',
			item: JSON.stringify(item)
		})
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 90vw;
		margin: 0 auto;
		color: #101010;

		&_main_btn {
			height: 106rpx;
			color: #00D075;
			font-size: 36rpx;
			border: 1px dashed;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 30rpx;
		}

		&_fotter {
			padding: 40rpx 0;
		}
	}
</style>